/* Reset de estilos y configuraciones globales */
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

/* Estilos para el cuerpo de la página */
body {
   height: 100vh; /* Altura completa de la ventana del navegador */
   background-color: #ffffff; /* Color de fondo blanco */
   display: flex; /* Utiliza el modelo de caja flexible */
   flex-direction: column; /* Apila elementos verticalmente */
   justify-content: center; /* Centra verticalmente los elementos */
   align-items: center; /* Centra horizontalmente los elementos */
}

/* Estilos para los encabezados h1 */
h1 {
   color: #000; /* Color de texto negro */
   font-size: 55px; /* Tamaño de fuente grande */
   margin: 80px 0; /* Margen superior e inferior grande */
}

/* Estilos para el contenedor del Swiper */
.swiper {
   width: 80%; /* Ancho del 80% del contenedor padre */
   height: 100%; /* Altura del 100% del contenedor padre */
}

/* Estilos para las diapositivas del Swiper */
.swiper-slide {
   background-position: center; /* Posición de fondo centrada */
   background-size: cover; /* Tamaño de fondo cubrir */
   width: 350px; /* Ancho fijo de las diapositivas */
}

/* Estilos para el contenido de las diapositivas */
.slide-content {
   text-align: center; /* Texto centrado horizontalmente */
   padding: 20px; /* Relleno interior */
   font-family: 'Courier New', Courier, monospace; /* Fuente monoespaciada */
}

/* Estilos para los párrafos dentro del contenido de las diapositivas */
.slide-content p {
   font-size: 22px; /* Tamaño de fuente grande */
   color: black; /* Color de texto negro */
}

/* Estilos para el contenedor del menú */
.menu-container {
   width: 100%; /* Ancho completo del contenedor */
   text-align: center; /* Texto centrado horizontalmente */
   position: fixed; /* Posicionamiento fijo */
   top: 0; /* Arriba del todo */
   left: 0; /* A la izquierda del todo */
   background-color: #000000; /* Color de fondo negro */
   z-index: 1; /* Z-index para estar sobre otros elementos */
}

/* Estilos para el menú */
.menu-edit {
   max-width: 900px; /* Ancho máximo del menú */
   margin: 0 auto; /* Margen automático para centrar */
   font-size: 20px; /* Tamaño de fuente grande */
}

/* Estilos para la lista de elementos del menú horizontal */
.menu-horizontal {
   width: 100%; /* Ancho completo del menú */
   list-style: none; /* Quita los puntos de lista */
   display: flex; /* Utiliza el modelo de caja flexible */
   justify-content: space-around; /* Distribuye uniformemente los elementos */
   padding: 0; /* Sin relleno */
   margin: 0; /* Sin margen */
}

/* Estilos para los elementos del menú horizontal */
.menu-horizontal>li>a {
   display: block; /* Mostrar como bloque */
   font-size: 2vh; /* Tamaño de fuente relativo */
   padding: 15px 20px; /* Relleno interno */
   color: white; /* Color de texto blanco */
   text-decoration: none; /* Sin subrayado de enlace */
   transition: color 0.3s ease; /* Transición suave de color */
}

/* Estilos para los elementos del menú horizontal al pasar el cursor */
.menu-horizontal>li:hover {
   background-color: rgb(255, 255, 255); /* Color de fondo blanco */
}

/* Estilos para los elementos del menú horizontal al pasar el cursor */
.menu-horizontal>li:hover>a {
   color: black; /* Color de texto negro */
}

/* Estilos para la lista de elementos del menú vertical */
.menu-vertical {
   position: absolute; /* Posicionamiento absoluto */
   display: none; /* Ocultar inicialmente */
   list-style: none; /* Quita los puntos de lista */
   width: 200px; /* Ancho fijo */
   background-color: rgba(0, 0, 0, .5); /* Color de fondo semitransparente */
   font-size: 2vh; /* Tamaño de fuente relativo */
}

/* Estilos para mostrar el menú vertical al pasar el cursor sobre el menú horizontal */
.menu-horizontal li:hover .menu-vertical {
   display: block; /* Mostrar el menú vertical */
}

/* Estilos para los elementos del menú vertical al pasar el cursor */
.menu-vertical li:hover {
   background-color: black; /* Color de fondo negro */
}

/* Estilos para los enlaces dentro de los elementos del menú vertical */
.menu-vertical li a {
   display: block; /* Mostrar como bloque */
   color: white; /* Color de texto blanco */
   padding: 15px 15px 15px 20px; /* Relleno interno */
   text-decoration: none; /* Sin subrayado de enlace */
}

/* Estilos para el contenedor de las marcas */
.brand-container {
   width: 100%; /* Ancho completo del contenedor */
   display: flex; /* Utiliza el modelo de caja flexible */
   justify-content: center; /* Centra horizontalmente los elementos */
   align-items: center; /* Centra verticalmente los elementos */
   padding: 20px 0; /* Relleno interior */
}

/* Estilos para las imágenes de las marcas */
.brand-logo {
   width: 70px; /* Ancho fijo de las imágenes */
   margin: 0 25px; /* Margen entre las imágenes */
   opacity: 0.4; /* Opacidad inicial */
   transition:  0.3s ease; /* Transición suave */
   margin-top: 70px; /* Margen superior */
   margin-bottom: -170px; /* Margen inferior negativo */
}

/* Estilos para resaltar las imágenes de las marcas al pasar el cursor */
.brand-logo:hover {
   opacity: 1; /* Opacidad completa */
   transform: scale(1.15); /* Aumenta el tamaño */
}


/* Estilos aplicados cuando el ancho de la ventana es igual o menor a 991px */
@media (max-width: 991px) {
   /* Estilos para el contenedor del menú */
   .menu-container {
      padding: 8px 0; /* Relleno interior ajustado */
   }

   /* Estilos para el encabezado */
   h1 {
      font-size: 4vw; /* Tamaño de fuente relativo */
      margin: 3vh 0; /* Margen superior e inferior ajustado */
   }

   /* Estilos para el contenedor del Swiper */
   .swiper {
      height: 70vh; /* Altura ajustada del 60% del contenedor padre */
   }

   /* Estilos para las diapositivas del Swiper */
   .swiper-slide {
      width: 70vw; /* Ancho relativo de las diapositivas */
      max-width: 200px; /* Ancho máximo fijo ajustado de las diapositivas */
   }

   /* Estilos para los párrafos dentro del contenido de las diapositivas */
   .slide-content p {
      font-size: 3vw; /* Tamaño de fuente relativo ajustado */
   }

   /* Estilos para el contenedor de las marcas */
   .brand-container {
      padding: 20px 0; /* Relleno interior ajustado */
      flex-wrap: wrap; /* Permite que los elementos se envuelvan en múltiples líneas */
   }

   /* Estilos para las imágenes de las marcas */
   .brand-logo {
      width: 20vw; /* Ancho relativo ajustado de las imágenes */
      max-width: 80px; /* Ancho máximo fijo ajustado de las imágenes */
      margin: 10px; /* Margen entre las imágenes ajustado */
   }
}

/* Estilos aplicados cuando el ancho de la ventana es igual o menor a 768px */
@media (max-width: 768px) {
   /* Estilos para el contenedor del menú */
   .menu-container {
      padding: 6px 0; /* Relleno interior ajustado */
   }

   /* Estilos para el encabezado */
   h1 {
      font-size: 5vw; /* Tamaño de fuente relativo */
      margin: 2vh 0; /* Margen superior e inferior ajustado */
   }

   /* Estilos para el contenedor del Swiper */
   .swiper {
      height: 60vh; /* Altura ajustada del 50% del contenedor padre */
      
   }

   /* Estilos para las diapositivas del Swiper */
   .swiper-slide {
      width: 95vw; /* Ancho relativo de las diapositivas */
      max-width: 300px; /* Ancho máximo fijo ajustado de las diapositivas */
      
   }

   /* Estilos para los párrafos dentro del contenido de las diapositivas */
   .slide-content p {
      font-size: 6.5vw; /* Tamaño de fuente relativo ajustado */
      
   }

   /* Estilos para el contenedor de las marcas */
   .brand-container {
      padding: 15px 0; /* Relleno interior ajustado */
      flex-wrap: wrap; /* Permite que los elementos se envuelvan en múltiples líneas */
      justify-content: space-around; /* Espacio alrededor de los elementos */
   }

   /* Estilos para las imágenes de las marcas */
   .brand-logo {
      width: 25vw; /* Ancho relativo ajustado de las imágenes */
      max-width: 70px; /* Ancho máximo fijo ajustado de las imágenes */
      margin: 8px; /* Margen entre las imágenes ajustado */
   }
}